<div th:replace="~{sidebar :: layout('首页', _, ~{::.main}, ~{::#js})}" xmlns:th="http://www.thymeleaf.org">
    <!-- 主内容区域 -->
    <div class="main-content main" id="mainContent">
        <div class="header">
            <h1 id="contentTitle">产品管理</h1>
            <div class="products-actions">
                <button class="btn btn-primary" id="addCustomerBtn">
                    <i class="icon-customers"></i> 添加产品
                </button>
                <button class="toggle-sidebar" id="toggleSidebar">☰</button>
            </div>
        </div>

        <!-- 产品统计卡片 -->
        <div class="customer-stats">
            <div class="stat-card">
                <div class="stat-value" th:text="${products.getTotalElements()}">248</div>
                <div class="stat-label">总产品数</div>
            </div>
        </div>

        <!-- 产品表格 -->
        <div class="customer-table-container">
            <div class="table-header">
                <div class="search-box">
                    <i class="icon-dashboard"></i>
                    <input type="text" th:value="${searchName}" id="searchInput" placeholder="搜索产品...">
                </div>
            </div>

            <table id="customerTable">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>产品名</th>
                    <th>规格</th>
                    <th>厚度</th>
                    <th>单价</th>
                    <th>产地</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody th:each="product : ${products.getContent()}">
                <!-- 产品数据将通过JavaScript动态加载 -->
                <td th:text="${product.getId()}">ID</td>
                <td th:text="${product.getName()}">产品名</td>
                <td th:text="${product.getModel().getSize()}">规格</td>
                <td th:text="${product.getModel().getThickness()}">厚度</td>
                <td th:text="${product.getPrice()}">单价</td>
                <td th:text="${product.getAddress()}">产地</td>
                <td>
                    <a class="action-btn edit-btn"
                       th:data-id="${product.id}"
                       th:data-name="${product.name}"
                       th:data-size="${product.model?.size}"
                       th:data-thickness="${product.model?.thickness}"
                       th:data-price="${product.price}"
                       th:data-address="${product.address}">编辑</a>
                    <a class="action-btn"
                       th:href="@{'/products/delete/' + ${product.getId()}}"
                       onclick="return confirm('确认删除?')">
                        删除
                    </a>
                </td>
                </tbody>
            </table>

            <div class="pagination" th:if="${products.getTotalElements() > 0}">
                <a class="btn btn-secondary" id="prevPage" th:if="${products.hasPrevious()}"
                   th:href="@{/products(current=${products.getNumber() > 0 ? products.getNumber() - 1 : 0},
                  page=10,
                  name=${searchName})}">上一页</a>
                <span class="page-info">当前第 [[${products.getNumber() + 1} ]] / [[${products.getTotalPages()}]] 页， 共计 [[${products.getTotalElements()}]] 条记录</span>
                <a class="btn btn-secondary" id="nextPage" th:if="${products.hasNext()}"
                   th:href="@{/products(current=${products.getNumber() > 0 ? products.getNumber() - 1 : 0},
                  page=10,
                  name=${searchName})}">下一页</a>
            </div>
        </div>
    </div>

    <!-- 添加/编辑产品模态框 -->
    <div class="modal main" id="customerModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">添加新产品</h3>
                <span class="close-btn">&times;</span>
            </div>
            <form id="customerForm" th:action="@{/products/save}" method="post">
                <div class="modal-body">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label for="productName">产品名</label>
                        <input name="productName" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="size">规格(mm*mm)</label>
                        <input name="size" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="thickness">厚度(mm)</label>
                        <input name="thickness" type="text">
                    </div>
                    <div class="form-group">
                        <label for="price">单价</label>
                        <input name="price" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="address">产地</label>
                        <input name="address" type="text" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-secondary close-btn">取消</a>
                    <button class="btn btn-primary" type="submit">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script th:src="@{/js/classify/products.js}" id="js"></script>
</div>